<template>
  <Row v-if="realName">
    <Col :xs="18">
      <div class="page-gird-container" style="margin-right: 24px">
        <Form label-position="left">
          <FormItem label="购买项目" label-width="70">
            <Select
              v-model="districtModel"
              style="width: 250px"
              clearable
              @on-change="onChangeSelect"
              :label-in-value="true"
            >
              <Option
                v-for="(item, index) in project"
                :value="item.uuid"
                :key="item + index"
                >{{ item.name }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="节点模式" label-width="70">
            <RadioGroup v-model="radio.button1" type="button" size="large">
              <Radio label="socks5"></Radio>
              <Radio label="http"></Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="地区" label-width="70">
            <Tabs value="name1" :animated="false">
              <TabPane label="中国" name="name1">
                <div
                  class="pform-select-item"
                  :class="{ districtActive: nowIndex == -1 }"
                  @click="changeDistrict(-1)"
                >
                  全部
                </div>
                <div
                  class="pform-select-item"
                  :class="{ districtActive: nowIndex == index }"
                  v-for="(item, index) in districts"
                  :key="item + index"
                  @click="changeDistrict(index, item.uuid)"
                >
                  {{ item.name }}
                </div>
              </TabPane>
            </Tabs>
          </FormItem>
          <FormItem label="节点" label-width="70">
            <div class="node-list">
              <div
                class="node-item"
                :class="{ nodeActive: nodeIndex == index }"
                v-for="(item, index) in nodes"
                :key="item + index"
                @click="handleNodeClick(item, index)"
              >
                <div class="node-item-top">
                  <i class="node-icon"></i>
                  <div class="node-name">{{ item.name }}</div>
                </div>
                <div class="node-item-bottom">
                  <div
                    class="node-signal"
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    "
                  >
                    <div>
                      <Icon type="ios-wifi" color="#32cd32" />
                      <span class="signal-state">良好</span>
                    </div>
                    <InputNumber
                      v-if="nodeClick || item.count !== 0"
                      v-model="item.count"
                      controls-outside
                      size="small"
                      style="width: 80px"
                      :max="item.stock"
                      min="0"
                    />
                  </div>
                </div>
              </div>
            </div>
          </FormItem>
          <FormItem label="购买时长" label-width="70">
            <RadioGroup v-model="duration" type="button" button-style="solid">
              <Radio label="day">1天</Radio>
              <Radio label="week">7天</Radio>
              <Radio label="month">30天</Radio>
              <Radio label="quarter">90天</Radio>
              <Radio label="half_year">180天</Radio>
              <Radio label="year">360天</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="自动续费" label-width="70">
            <RadioGroup v-model="renew">
              <Radio label="开启">开启</Radio>
              <Radio label="关闭">关闭</Radio>
            </RadioGroup>
          </FormItem>
        </Form>
      </div></Col
    >
    <Col :xs="6">
      <div
        class="page-gird-container"
        style="display: flex; flex-direction: column"
      >
        <div class="order-tabulate-head">订单汇总</div>
        <div class="order-tabulate-content">
          <div class="ot-list">
            <div class="item" style="margin-bottom: 10px" v-if="districtModel">
              <span style="color: #8c93a6">购买项目：</span
              ><span>{{ districtModelName }}</span>
            </div>
            <div
              class="item"
              v-for="(item, index) in submitNodes"
              :key="item + index"
            >
              <div>
                <span style="color: #8c93a6">线路：</span
                ><span>{{ item.name }} X {{ item.count }}</span>
              </div>
            </div>
          </div>
          <div class="ot-total-list">
            <div class="item">
              <div class="left">总数量：</div>
              <div class="right">{{ sum }}个</div>
            </div>
            <div class="item">
              <div class="left">购买时长：</div>
              <div class="right">{{ date }}</div>
            </div>
          </div>
        </div>
        <Button type="primary" @click="submit" :disabled="sum == 0"
          >提交去支付</Button
        >
      </div>
    </Col>
  </Row>
  <Result v-else type="warning" title="未实名">
    <template #desc> 未实名认证，实名认证后方能订购产品 </template>
    <template #actions>
      <Button type="primary" @click="toRealName">前往实名认证</Button>
    </template>
  </Result>
</template>

<script>
    import {
        openApiDistrict,
        openApiProxyIpProject,
        openApiProxyIpSellNodes,
        openApiProxyIpPurchase,
    } from "@/api/business/index";
    import { memberInfo } from "@/api/set";

    export default {
        name: "business-orderProduct",
        data() {
            return {
                districts: [],
                project: [],
                radio: {
                    button1: "socks5",
                    button2: "http",
                },
                nowIndex: -1,
                nodeIndex: -1,
                districtModel: "",
                districtModelName: "",
                nodes: [],
                submitNodes: [],
                InputNumber: 0,
                nodeClick: false,
                duration: "",
                renew: "关闭",
                renewBoolean: false,
                orderName: "",
                realName: true,
            };
        },
        methods: {
            toRealName() {
                this.$router.push({
                    name: "set-realName",
                });
            },
            onChangeSelect(val) {
                this.districtModelName = val.label;
                openApiProxyIpSellNodes({
                    project: val.value,
                }).then((res) => {
                    console.log(res);
                    this.nodes = res;
                    this.nodes.forEach((item) => {
                        item.count = 0;
                    });
                });
            },
            changeDistrict(index, id) {
                this.nowIndex = index;
                openApiProxyIpSellNodes({
                    project: this.districtModel,
                    district: id,
                }).then((res) => {
                    this.nodes = res;
                });
            },
            handleNodeClick(item, index) {
                if (this.districtModel) {
                    this.orderName = item.name;
                    this.nodeClick = true;
                    this.nodeIndex = index;
                    this.submitNodes = this.nodes.filter((item) => {
                        return item.count > 0;
                    });
                } else {
                    this.$Message.error("请先选择游戏");
                }
            },
            submit() {
                let newArr = [];
                this.submitNodes.forEach((item) => {
                    newArr.push({
                        id: item.uuid,
                        quantity: item.count,
                        bandwidth: 5,
                        flow: 10,
                    });
                });
                if (this.renew == "关闭") {
                    this.renewBoolean = false;
                } else {
                    this.renewBoolean = true;
                }
                openApiProxyIpPurchase({
                    project: this.districtModel,
                    nodes: newArr,
                    duration: this.duration,
                    renew: this.renewBoolean,
                }).then((res) => {
                    console.log(res);
                });
            },
        },
        computed: {
            sum() {
                let sum = 0;
                this.submitNodes.forEach((item) => {
                    sum = sum + item.count;
                });
                return sum;
            },
            date() {
                let aaa = "";
                if (this.duration == "day") {
                    aaa = "一天";
                }
                if (this.duration == "week") {
                    aaa = "七天";
                }
                if (this.duration == "month") {
                    aaa = "一个月";
                }
                if (this.duration == "quarter") {
                    aaa = "三个月";
                }
                if (this.duration == "half_year") {
                    aaa = "六个月";
                }
                if (this.duration == "year") {
                    aaa = "一年";
                }
                return aaa;
            },
        },
        created() {
            memberInfo().then((res) => {
                if (res.realName == 1) {
                    openApiDistrict().then((res) => {
                        this.districts = res;
                    });
                    openApiProxyIpProject().then((res) => {
                        this.project = res;
                    });
                    openApiProxyIpSellNodes({}).then((res) => {
                        this.nodes = res;
                        this.nodes.forEach((item) => {
                            item.count = 0;
                        });
                    });
                    this.realName = true;
                } else {
                    this.realName = false;
                }
            });
        },
    };
</script>

<style lang="less" scoped>
.page-gird-container {
  box-shadow: rgba(10, 32, 51, 0.12) 0px 1px 3px 0px;
  padding: 24px;
  box-sizing: border-box;
  background-color: #fff;
  .order-tabulate-head {
    padding: 3px 0 14px;
    font-weight: bold;
    font-size: 18px;
    color: #333;
    border-bottom: 1px solid #dbdde0;
    margin-bottom: 20px;
  }
  .order-tabulate-content {
    margin-bottom: 10px;
    .ot-list {
      min-height: 400px;
    }
    .ot-total-list {
      .item {
        display: flex;
        justify-content: space-between;
        line-height: 34px;
        font-size: 15px;
        .left {
          color: #8c93a6;
        }
        .right {
          font-weight: bold;
          color: #000;
        }
      }
    }
  }
}
.ivu-tabs-tabpane {
  display: flex;
  flex-wrap: wrap;
  .pform-select-item {
    margin-left: 9px;
    margin-bottom: 8px;
    padding: 0.547rem 0.75rem;
    min-width: 68px;
    font-size: 15px;
    border: none;
    background: #f1f2f5;
    color: #333;
    transition: background 0.3s, color 0.3s;
    cursor: pointer;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border-radius: 0.25rem;
  }
  .districtActive {
    color: #fff;
    background: #6064ff;
  }
}
.node-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -9px;
  .nodeActive {
    background: #f4f7ff;
    outline: 1px solid #88acff;
    border-color: #88acff;
    box-shadow: 0 0 4px 2px #d1dcf6;
  }
  .node-item {
    margin-left: 9px;
    margin-bottom: 9px;
    padding: 0 11px 0 9px;
    width: 168px;
    height: 88px;
    border-radius: 6px;
    border: 1px solid #c6d2f3;
    color: #000000;
    .node-item-top {
      display: flex;
      align-items: center;
      padding-top: 1px;
      line-height: 45px;
      border-bottom: 1px solid #e6e6e6;
      .node-icon {
        display: block;
        margin-right: 6px;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background: #32cd32;
        .node-item-bottom {
          position: relative;
          display: flex;
          align-items: center;
          height: 39px;
        }
      }
    }
  }
}
.ivu-icon {
  margin-right: 3px;
}
</style>
